<template>
  <div>
    <el-form ref="searchKey" :inline="true" :model="searchKey" :show-message="false" :inline-message="true"
             label-position="left" label-width="60px">
      <el-form-item label="名称:" prop="deptName">
        <el-input size="small" v-model="searchKey.deptName" clearable placeholder="请输入名称"
                  style="width: 150px;"></el-input>
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-select size="small" v-model="searchKey.status" clearable placeholder="状态"
                   style="width: 120px">
          <el-option v-for="item in enabledTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { debounce } from 'lodash'

  export default {
    name: 'DepartmentSearch',
    mixins: [],
    components: {},
    data() {
      return {
        isShowFilter: false, // 是否显示搜索
        searchKey: {},
        enabledTypeOptions: [
          { name: '启用', value: '0' },
          { name: '停用', value: '1' }
        ]
      }
    },
    props: {
      initParams: { // 初始参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      }
    },
    computed: {},
    methods: {
      resetSearchData() { // 重置表单
        this.searchKey = {
          ...JSON.parse(JSON.stringify(this.initParams)),
          ...{
            size: this.searchKey.size
          }
        }
      },
      handleFilter: debounce(function() { // 查询，防抖
        this.searchKey.page = 1
        this.$emit('on-init', this.searchKey)
      }, 300),
      handleReset: debounce(function() { // 重置查询，防抖
        this.resetSearchData()
        this.$emit('on-init', this.searchKey)
      }, 300),
      async initData() { // 初始化数据
      }
    },
    watch: {
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>

</style>
